<template>
	<view class="content">
		<view class="content1">
			<view class="nav">
				<image class="img" src="../../static/mipmap-xxxhdpi/icon_home_top.png" mode=""></image>
				<view class="navs" style="padding-top: 20rpx;">
					<navigator url="/pages/switch/switch">
						<image class="img2" src="../../static/mipmap-xxxhdpi/icon_location_white.png" mode=""></image>

						<span class="span_a">{{name || areaName}}</span>
					</navigator>
				</view>
				<!-- 轮播图 -->
				<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
					:circular="true">
					<swiper-item v-for="item,i in bannerImg" :key="i">
						<view class="swiper-item">
							<image :src="item.image" mode="" style="width: 700rpx;"></image>
						</view>
					</swiper-item>
				</swiper>

			</view>
		</view>

		<view class="middle">
			<navigator url="/pages/home/home">
				<view class="middle1">
					<h4>园区介绍</h4>
					<p>创业优选</p>
				</view>
			</navigator>
			<navigator url="/pages/parkData/parkData">
				<view class="middle2">
					<h4>园区数据</h4>
					<p>园区实况</p>
				</view>
			</navigator>
			<navigator url="/pages/recruitment/recruitment">
				<view class="middle3">
					<h4>园区招聘</h4>
					<p>多岗热招</p>
				</view>
			</navigator>

			<view class="middle-plus">
				<navigator url="../service/Meeting-appointment/Meeting-appointment">
					<view class="middle-plus1">
						<image src="../../static/mipmap-xxxhdpi/icon_meeting.png" mode=""></image>
						<p>会议预约</p>
					</view>
				</navigator>
				<navigator url="../service/Canteen-reservation/Canteen-reservation">
					<view class="middle-plus1">
						<image src="../../static/mipmap-xxxhdpi/icon_dining.png" mode=""></image>
						<p>食堂订餐</p>
					</view>
				</navigator>
				<navigator url="../Visitor-Reservation/Visitor-Reservation">
					<view class="middle-plus1">
						<image src="../../static/mipmap-xxxhdpi/icon_appointment.png" mode=""></image>
						<p>访客预约</p>
					</view>
				</navigator>
				<navigator url="../service/Top-up/Top-up">
					<view class="middle-plus1">
						<image src="../../static/mipmap-xxxhdpi/icon_pay.png" mode=""></image>
						<p>充值缴费</p>
					</view>
				</navigator>
				<navigator url="../service/Asset-management/Asset-management">
					<view class="middle-plus1">
						<image class="image" src="../../static/mipmap-xxxhdpi/icon_property_manager.png" mode="">
						</image>
						<p>资产管理</p>
					</view>
				</navigator>
			</view>
			<!-- 政务党建 -->
			<view class="government">
				<view class="government1">
					<h4>政务党建</h4>
				</view>
				<p>
					<uni-notice-bar style="width: 600rpx;" show-icon scrollable speed="50" showIcon="false"
						text="uni-app 版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。">
					</uni-notice-bar>
				</p>
			</view>
		</view>
		<!-- <button @click="as">11</button> -->
		<!-- <button @click="aw">22</button> -->
	</view>
	<!-- 园区咨询 -->
	<view class="box-bg" style="position: relative;" @click="box(id)">
		<uni-nav-bar shadow right-icon="right" />
		<span style="position: absolute; top: 15px; font-size: 18px; color: #ef9312;">园区咨询
			<p class="ps">园区咨询，抢先知道</p>
		</span>
	</view>
	<view class="consult">
		<ul>
			<li v-for="item,index in yuan" :key="item.id" @click="add(item)">
				<!-- <navigator url="../Detail/Detail?id={{item.Id}}"> -->
				&nbsp;&nbsp;<span>{{item.title}}</span>
				<image :src="item.cover" mode=""></image>
				<!-- 时间 -->
				<p>{{ moment(item.updatedAt * 1000).format('YYYY-MM-DD HH:mm:ss') }}</p>
				<!-- </navigator> -->
			</li>
		</ul>
	</view>
</template>

<script setup>
	import {
		banner,

	} from "@/utils/ajax.js";
	import {
		Party,
		Details
	} from "@/utils/file.js";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive
	} from "vue";
	import moment from "moment"
	let id = ref();
	let name = ref("");
	let areaName = ref("");
	let lunImg = ref("");
	let bannerImg = reactive([]);
	let yuan = reactive([]);

	onLoad((options) => {
		id.value = options.id;
		name = options.name;
		areaName = options.areaName;
		lunImg = options.lunImg;
		qw()
		// 文章列表
		// function qu() {
		// 	console.log(id.value, "22");
		Party(1, 0, 10, id.value || lunImg, uni.getStorageSync('token')).then((res) => {
			console.log(res.data.data, id, "666");
			yuan.push(...res.data.data.splice(0, 4));
		}).catch((err) => {
			console.error("请求园区资讯数据出错", err); 
		});
		// }
	});
	// 轮播图·数据
	function qw() {
		console.log(id);
		console.log(lunImg);
		banner(1, 10, lunImg || id.value).then((res) => {
			if (res && res.data && res.data.data) {
				console.log(res.data.data, id);
				bannerImg.push(...res.data.data);
			} else {
				console.error("banner 数据获取失败");
			}
		}).catch(err => {
			console.error('banner 请求出错', err);
		});
	}



	// 政务党建
	Party(3, 0, 10, 8, uni.getStorageSync('token')).then(res => {
		console.log(res, "政务党建");
	})

	function box(id) {
		console.log(id);
		uni.navigateTo({
			url: `/pages/Consult/Consult?id=${id}`
		})
	}

	function add(item) {
		uni.navigateTo({
			url: `../Detail/Detail?id=${item.id}`
		})
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.content1 {
		width: 750rpx;
		height: 450rpx;
		/* border: 1px solid; */
	}

	.nav {
		width: 750rpx;
		height: 220rpx;
		position: relative;
	}

	.span_a {
		position: relative;
		top: -10rpx;
	}

	.img {
		width: 100%;
		height: 100%;
	}

	.navs {
		position: absolute;
		top: 50rpx;
		color: white;
		left: 50rpx;
	}

	.img2 {
		position: absolute;
		left: -40rpx;
		width: 30rpx;
		height: 30rpx;
	}

	uni-swiper {
		width: 700rpx;
		left: 3%;
		position: relative;
		/* border: 1px solid red; */
		margin-top: -50px !important;
	}

	swiper-item {
		display: inline-block;
		width: 700rpx;
	}

	.middle {
		width: 750rpx;
		height: 460rpx;
		background-color: #ebebeb;
	}

	.middle1 {
		display: inline-block;
		width: 220rpx;
		height: 130rpx;
		/* background-color: aqua; */
		margin-left: 24rpx;
		background-image: url(../../static/mipmap-xxxhdpi/icon_bg_introduce.png);
		background-size: 100% 100%;
	}

	.middle1 h4,
	.middle2 h4,
	.middle3 h4 {
		display: inline-block;
		font-size: 33rpx;
		margin-left: 30rpx;
		margin-top: 20rpx;
	}

	.middle1 p,
	.middle2 p,
	.middle3 p {
		font-size: 28rpx;
		display: inline-block;
		margin-left: 30rpx;
	}

	.middle2 {
		display: inline-block;
		width: 220rpx;
		height: 130rpx;
		/* background-color: aqua; */
		margin-left: 24rpx;
		background-image: url(../../static/mipmap-xxxhdpi/icon_bg_enter.png);
		background-size: 100% 100%;
	}

	.middle3 {
		display: inline-block;
		width: 220rpx;
		height: 130rpx;
		/* background-color: aqua; */
		margin-left: 24rpx;
		background-image: url(../../static/mipmap-xxxhdpi/icon_bg_recruitment.png);
		background-size: 100% 100%;
	}

	navigator {
		display: inline-block;
	}

	.middle-plus {
		width: 100%;
		height: 150rpx;
	}

	.middle-plus1 {
		display: inline-block;
		width: 150rpx;
		height: 150rpx;
		/* background-color: aliceblue; */
	}

	.middle-plus1 image {
		display: inline-block;
		width: 100rpx;
		height: 100rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}

	.middle-plus1 p {
		font-size: 20rpx;
		text-align: center;
	}

	// 政务党建
	.government {
		width: 700rpx;
		height: 100rpx;
		// background-color: #92959c;
		margin: 40rpx auto;
		border-radius: 10rpx;

		.government1 {
			display: inline-block;
			width: 80rpx;
			height: 100%;
			background-color: #cfd4dc;
			overflow: hidden;
			border-radius: 10rpx;
			margin-left: 20rpx;

			h4 {
				color: #3a75b0;
				display: block;
				width: 70rpx;
				height: 100rpx;
				font-size: 25rpx;
				// background-color: #ef9312;
				text-align: center;
				line-height: 45rpx;
				margin-top: 5rpx;
			}
		}

		p {
			width: 600rpx;
			height: 100%;
			// background-color: pink;
			display: inline-block;
			overflow: hidden;

			uni-view {
				height: 100rpx;
			}
		}
	}

	// 园区咨询
	$nav-height: 30px;

	.box-bg {
		background-color: #F5F5F5;
		padding: 5px 0;
	}

	.uni-navbar--border[data-v-26544265] {
		border-bottom-width: 0.03125rem;
		/* border-bottom-style: solid; */
		border-bottom-color: #eee;
	}

	.ps {
		color: #bab1b2;
		display: inline-block;
		font-size: 28rpx;
	}

	ul {
		position: relative;
		width: 750rpx;
		list-style: none;
		margin: 0;
		padding: 0;

		li:nth-child(1) {
			width: 450rpx;
			height: 200rpx;
		}

		li {
			width: 750rpx;
			height: 200rpx;

		}

		span {
			display: inline-block;
			margin-top: 20rpx;
		}

		image {
			position: absolute;
			width: 170rpx;
			height: 170rpx;
			top: 0;
			right: 0;
		}

		p {
			width: 700rpx;
			height: 100rpx;
			color: #bab1b2;
			font-size: 30rpx;
			display: block;
			line-height: 100rpx;
		}
	}
</style>